<template>
	<view class="page">
		<com-header title="分享给好友"></com-header>
		<image src="/static/img/share-app.png" class="share"></image>
		<view class="share-to-wrap">
			<text class="share-to">分享到</text>
			<image src="/static/img/wechat.png" class="wechat"  @click="shareFriend()" ></image>
			<image src="/static/img/friend.png" class="friend"  @click="shareFriendcricle()"></image>
			<image src="/static/img/photo.png"  class="photo" @click="saveImgToLocal"></image>
			<text class="to-friend" @click="shareFriend()">微信好友</text>
			<text class="to-friend-circle" @click="shareFriendcricle()">微信朋友圈</text>
			<text class="to-photo" @click="saveImgToLocal">保存到相册</text>
			
		</view>
	</view>
</template>

<script>
	import ComHeader from '@/components/ComHeader';
	export default {
		onLoad: function(options) {
			//调用需要的方法 保存图片
			 this.sharImg();
		},
		data() {
			return {
				imgurl:'',
			}
		},
		components: {
			ComHeader
		},
		methods:{
			 shareFriend() {
			   //分享到微信朋友
				uni.share({ 
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "yun.youpilive.com/share/index/index",//这地址太长了，就省略了
					title: "'云盟商桥'引导时尚新主流",
					summary: "下载'云盟商桥'App尽享超值特惠",                         
					imageUrl: "/static/img/logo.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//	分享到朋友圈
		    shareFriendcricle() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "yun.youpilive.com/share/index/index", //这个链接 是跳到一个页面 是选择 h5 还是 下载app 
					title: "'云盟商桥'引导时尚新主流",
					summary: "下载'云盟商桥'APP尽享超值特惠",
					imageUrl: "/static/img/logo.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			sharImg(){
				var t=this;
				this.$api.getSareImgurl().then(res => {
					console.log(res)
					if(res.data.status == true){
						
						t.imgurl = res.data.img
					
					}
					
				})
				
			},
			//保存到相册
			saveImgToLocal:function(e){
				var t=this;
				this.$api.getSareImgurl().then(res => {
					console.log(res)
					if(res.data.status == true){
						
						t.imgurl = res.data.img
					
					}
					
				})
			                
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function (res) {
						if (res.confirm) {
							uni.downloadFile({
									url:t.imgurl,//图片地址
									success: (res) =>{
										
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										} 
									}
								})
							
							
						} else if (res.cancel) {
							
						}
					}
				});
			                
			}
				
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh -(calc(var(--status-bar-height) + 120rpx));
		padding-top: calc(var(--status-bar-height) + 120rpx);
	}
	.share {
		width: 610rpx;
		height: 950rpx;
		margin-top: 55rpx;
		margin-left: 70rpx;
	}
	.share-to-wrap {
		width: 650rpx;
		height: 289rpx;
		margin-left: 50rpx;
		margin-top: 50rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 6rpx 21rpx 0rpx rgba(174,174,174,0.29);
		border-radius: 30rpx;
		overflow: auto;
	}
	.share-to {
		display: block;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		margin-left: 273rpx;
		margin-top: 54rpx;
	}
	.wechat {
		width: 68rpx;
		height: 57rpx;
		margin-left: 72rpx;
		margin-top: 50rpx;
	}
	.friend {
		width: 64rpx;
		height: 64rpx;
		margin-left: 153rpx;
	}
	.photo {
		width: 62rpx;
		height: 62rpx;
		margin-left: 156rpx;
	}
	.to-friend {
		display: inline-block;
		margin-left: 51rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.to-friend-circle {
		display: inline-block;
		margin-left: 94rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.to-photo {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 82rpx;
	}
</style>
